<template>
    <div class="flex">
        <div class="stat-type">
            <div class="title-row">
                <div class="flex item-center">
                    <div class="label-line"></div>
                    <span class="title">取件情况</span>

                </div>
                <div class="line"></div>
            </div>
            <div id="statCharts" class="take-content">

            </div>
        </div>
        <div class="stat-rank">
            <div class="title-row">
                <div class="flex item-center rank-title">
                    <div class="label-line"></div>
                    <span class="title">我的寄件</span>

                </div>
                <div class="line"></div>
            </div>
            <ul class="rank-ul">
                <li v-for="(item,index) in expressList" :key="index" class="rank-list">
                    <div class="sent-no" @click = "searchExpress">
                        <div class="text-over">
                            <span>⊙</span>
                            <span :title = "item.expressNo">{{item.expressNo}}</span>
                        </div>
                    </div>
                    <!-- <span class = "expressStatus">已邮寄</span> -->
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";

const up = require("../../assets/acceptWorkbench/up.png");
const hold = require("../../assets/acceptWorkbench/keep.png");
const down = require("../../assets/acceptWorkbench/down.png");
import { findByDictCode,getMyTakeInfo,myExpress} from "../../config/api.js";
import Pubsub from "../../utils/pubsub";
export default {
    data() {
        return {
            rankStateList: { up, hold, down },
            data: [],
            mailTypeCode: [],//邮件数据字典值
            mailTypeCodeTitle: [],//邮件数据字典值里的名称
            MyTakeInfoList: [],//邮件数据
            myChart:null,
            expressList:[],
        };
    },
    computed:{
        // dyClass:{
        //     get:function(){
        //         return "pjColor"
        //     }
        // }
    },
    mounted() {
        this.initChart();
        this.getMyTakeInfo();
        this.getList();
        this.token_pubsub1 = Pubsub.subscribe("MAKE_GET",()=>{
            this.getMyTakeInfo();
        })
    },
    destroyed(){
        this.token_pubsub1 && Pubsub.unsubscribe(this.token_pubsub1);
    },
    methods: {
        searchExpress(){
            window.open(" https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E9%82%AE%E6%94%BF%E5%BF%AB%E9%80%92%E5%8D%95%E5%8F%B7%E6%9F%A5%E8%AF%A2&rsv_pq=f27adb0600001343&rsv_t=0ad3rdCQmu6EjYfz0OWZJqd3GY9iNLL7%2BN717wFUQD4Y4dHhpol03s9TjLk&rqlang=cn&rsv_enter=1&rsv_sug3=9&rsv_sug1=5&rsv_sug7=100&rsv_sug2=0&prefixsug=%25E9%2582%25AE%25E6%2594%25BF&rsp=0&inputT=2390&rsv_sug4=2390","_blank")
        },
        /**
         * 我的寄件查询接口
         */
        getList() {
            myExpress({ pageNum: 1, pageSize: 20 }).then((result = {}) => {
                let data = result.data || {};
                let rows = data.rows || [];
                this.expressList = rows;
            });
        },
        dyClass(item){
            console.log(item)
            return "pjColor"
        },
        getMyTakeInfo(){
            getMyTakeInfo({pageSize:999,pageNum:1}).then((result = {})=>{
                let data = result.data || [];
                let cData = [];
                data.map((item)=>{
                    cData.push({
                        value:item.count,
                        name:item.getType == 1?"现场取件":"到付邮寄"
                    })
                })
                  this.myChart.setOption({
                    // 加载数据图表
                    legend: {
                        orient: "vertical",
                        x: "left",
                        data: ["到付邮寄","现场取件"]
                    },
                    series: [
                        {
                            data: cData
                        }
                    ]
                });
            })
        },
        initChart() {
            this.myChart = echarts.init(document.getElementById("statCharts"));

            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                color: ["#c23531", "#2f4554"],
                legend: {
                    orient: "vertical",
                    x: "left",
                    data: this.data.mailTypeCodeTitle||[]
                },
                grid: {
                    bottom: 0
                },
                series: [
                    {
                        name: "办件类型",
                        type: "pie",
                        radius: ["50%", "70%"],
                        avoidLabelOverlap: false,
                        center: ["50%", "60%"],
                        label: {
                            normal: {
                                show: false,
                                position: "center"
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: "30",
                                    fontWeight: "bold"
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: []
                    }
                ]
            };
            this.myChart.setOption(option);
            // setTimeout(() => {
            //     myChart.hideLoading();
            //     myChart.setOption({
            //         //加载数据图表
            //         series: [
            //             {
            //                 data: this.initData()
            //             }
            //         ]
            //     });
            // }, 3000);
            // window.addEventListener("resize", function() {
            //     myChart.resize();
            // });
        },
        /**
         * 获取rank icon
         */
        getRankIcon(index) {
            return this.iconList[index];
        },
        /**
         * 获取rank状态 icon
         */
        getSent(item) {
            // return this.rankStateList[item.state];
        },
        /**
         * 处理类型数据
         */
        initData(){
            const {MyTakeInfoList=[],mailTypeCode}=this;
            if(MyTakeInfoList&&MyTakeInfoList.length>0){
                MyTakeInfoList.map(item=>{
                    item.value=item.count;
                    item.name=((mailTypeCode.find(i=>i.dictDataCode==item.getType)||{}).dictDataName)||'-';
                })
                this.MyTakeInfoList=MyTakeInfoList;
                return MyTakeInfoList
            }else{
                return []
            }
        },
        /**
         * 获取数据字典--取件类型
         */
        getDictCode() {
            findByDictCode({ dictCode: 'getType' }).then((res = {}) => {
                if(res.data&&res.data.length){
                    this.mailTypeCode = res.data||[];
                    let mailTypeCodeTitle=[];
                    res.data.map(item=>{
                        mailTypeCodeTitle.push(item.dictDataName);
                    })
                    this.mailTypeCodeTitle=mailTypeCodeTitle;
                }
            });
        },
    }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";

.take-content {
    margin-top: 20px;
    height: 259px;
    /* width: 259px; */
    overflow: auto;
    .take-li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
        &:last-child {
            margin-bottom: 0;
        }
        font-size: 16px;
    }
    .circle {
        height: 4px;
        width: 4px;
        border-radius: 4px;
        background: #000;
        display: block;
        margin-right: 20px;
    }
    .take-num {
        color: #ffaa00;
    }
    .take-time {
        font-size: 18px;
        color: #ffaa00;
        span {
            font-size: 14px;
            color: #888888;
        }
    }
}
.rank-ul{
    margin-top: 20px;
}
.rank-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.default-rank {
    height: 24px;
    width: 18px;
    text-align: center;
    line-height: 24px;
}

.stat-type {
    flex: 2;
    margin-right: 30px;
}
.stat-rank {
    flex: 1;
}
.rank-title {
    white-space: nowrap;
}
.sent-no{
    flex:1;
    width: 0;
    cursor: pointer;
}
.text-over{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pjColor{
    color:red;
}
.expressStatus{
    color:#00a01e;
}
</style>